HTML Web Workers API
वेब वर्कर एक बाहरी जावास्क्रिप्ट फ़ाइल है जो पृष्ठ प्रदर्शन को प्रभावित किए बिना पृष्ठभूमि में चलती है।
वेब वर्कर क्या है?
HTML पृष्ठ पर स्क्रिप्ट चलाते समय, स्क्रिप्ट समाप्त होने तक पृष्ठ अनुत्तरदायी हो जाता है।
एक वेब वर्कर एक बाहरी जावास्क्रिप्ट फ़ाइल है जो पृष्ठ के प्रदर्शन को प्रभावित किए बिना, अन्य स्क्रिप्ट से स्वतंत्र रूप से पृष्ठभूमि में चलती है। जब वेब वर्कर डेस्कटॉप पर चल रहा हो, तो आप कुछ भी कर सकते हैं: क्लिक करना, चीज़ों का चयन करना आदि।
वेब वर्कर भारी कोड के लिए उपयोगी होते हैं जो महत्वपूर्ण थ्रेड पर नहीं चल सकते हैं, जिससे पेज को अनुत्तरदायी बनाने के लिए लंबे कार्य नहीं होते हैं।
ब्राउज़र समर्थन
तालिका में दिए गए नंबर वेब वर्कर्स एपीआई को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र संस्करण का प्रतिनिधित्व करते हैं।
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
वेब वर्कर्स एपीआई उदाहरण
नीचे दिया गया उदाहरण एक साधारण वेब वर्कर बनाता है जो निम्नलिखित तालिका में संख्याओं की गणना करता है:
संख्याएँ गिनें:
नोट:
आमतौर पर वेब वर्कर्स का उपयोग ऐसी सरल स्क्रिप्ट के लिए नहीं, बल्कि बहुत सीपीयू गहन कार्यों के लिए किया जाता है!
वेब वर्कर एपीआई समर्थन का परीक्षण करें
वेब वर्कर का उपयोग करने से पहले, आइए ब्राउज़र समर्थन की तुरंत जाँच करें:
उदाहरण
<script>
const x = document.getElementById("result");
if(typeof(Worker) !== "undefined") {
x.innerHTML = "Your browser support Web Workers!";
} else {
x.innerHTML = "Sorry, your browser does not support Web Workers.";
}
</script>अपना ब्राउज़र समर्थन जांचें:
एक .js वेब वर्कर फ़ाइल बनाना
अब, आइए एक बाहरी जावास्क्रिप्ट फ़ाइल में एक वेब वर्कर बनाएं।
यहां हम एक ऐसी स्क्रिप्ट बनाते हैं जो मायने रखती है। स्क्रिप्ट "demo_workers.js" फ़ाइल में संग्रहीत है:
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
नोट:
उपरोक्त कोड का महत्वपूर्ण भागpostMessage()विधि - इसका उपयोग HTML पेज पर संदेश पोस्ट करने के लिए किया जाता है।
एक वेब वर्कर ऑब्जेक्ट बनाना
.js वेब वर्कर फ़ाइल बनाने के बाद, इसे HTML पेज से कॉल किया जा सकता है।
निम्नलिखित पंक्तियाँ जाँचती हैं कि क्या कोई वर्कर (w) पहले से मौजूद है, अन्यथा - यह एक नया वेब वर्कर ऑब्जेक्ट बनाता है और .js फ़ाइल की ओर इंगित करता है: "demo_workers.js":
उदाहरण
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}फिर हम वेब वर्कर से संदेश भेज और प्राप्त कर सकते हैं।
डेटा को वेब कर्मियों और महत्वपूर्ण थ्रेड के बीच संदेशों के माध्यम से पारित किया जाता है - दोनों पक्ष अपने संदेश देते हैंpostMessage()विधि का उपयोग करके भेजें, औरonmessageईवेंट हैंडलर के माध्यम से संदेशों का जवाब दें।
वेब वर्कर ऑब्जेक्ट के लिए एonmessageएक ईवेंट श्रोता जोड़ें.
उदाहरण
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};जब .js में वेब वर्कर एक संदेश पोस्ट करता है, तो इवेंट श्रोता के अंदर का कोड निष्पादित होता है। वेब वर्कर से डेटाevent.dataमें संग्रहित है.
वेब वर्कर को समाप्त करना
जब एक वेब वर्कर ऑब्जेक्ट बनाया जाता है, तो यह समाप्त होने तक संदेशों को सुनना जारी रखता है।
एक वेब वर्कर ऑब्जेक्ट को समाप्त करें, और ब्राउज़र/सिस्टम संसाधनों को मुक्त करें।terminate()विधि का प्रयोग करें:
उदाहरण
w.terminate();वेब वर्कर का पुन: उपयोग करना
यदि आप समाप्ति के बाद वेब वर्कर वैरिएबल को अपरिभाषित पर सेट करते हैं, तो आप वर्कर/कोड का पुन: उपयोग कर सकते हैं:
उदाहरण
w = undefined;पूर्ण वेब वर्कर उदाहरण
हम .js फ़ाइल में वेब वर्कर कोड पहले ही देख चुके हैं।
HTML पेज का पूरा कोड नीचे दिया गया है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
x.innerHTML = event.data;
};
} else {
x.innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>वेब कर्मी और DOM
क्योंकि वेब वर्कर बाहरी .js फ़ाइलों में हैं, उनके पास निम्नलिखित जावास्क्रिप्ट ऑब्जेक्ट तक पहुंच नहीं है:
विंडो ऑब्जेक्ट
प्रवेश करने में असमर्थ
दस्तावेज़ वस्तु
प्रवेश करने में असमर्थ
मूल वस्तु
प्रवेश करने में असमर्थ
टिप्पणी:
वेब वर्कर सीधे DOM को संशोधित नहीं कर सकते। उन्हें संदेश विनिमय के माध्यम से महत्वपूर्ण सूत्र के साथ संवाद करने की आवश्यकता है।
क्रिटिकल थ्रेड बनाम वेब वर्कर
महत्वपूर्ण पाठ
- यूआई इंटरफ़ेस को संभालता है
- DOM तक पहुंच है
- उपयोगकर्ता संचार का जवाब देता है
- लंबे कार्य पृष्ठ को अक्षम कर सकते हैं
- तत्काल संभालने के लिए उपयुक्त
वेब कार्यकर्ता
- उसके बाद यह कंप्यूटर पर चलता है
- DOM तक कोई पहुंच नहीं
- उपयोगकर्ता के इंटरैक्शन में खलल नहीं डालता
- भारी गणनाएँ संभालता है
- डेटा प्रोसेसिंग के लिए उपयुक्त